<template>
    <div class="wrap1" v-if="showLang">
        <li @click="handleLang1">English</li>
        <li @click="handleLang2">繁體中文</li>
        <li @click="handleLang3">简体中文</li>
    </div>
</template>

<script lang="ts">
export default {
    name: "XLang",
};
</script>

<script lang="ts" setup>

import { ref, defineExpose, inject } from 'vue';
import { getCurrentInstance } from 'vue'
import { ipoStore } from "@/stores/ipo"
import { useRouter } from "vue-router";
import router from '@/router';
const store = ipoStore()
const route = useRouter()
const { proxy } = (getCurrentInstance() as any)

const showLang = ref(false)
const reflashRouter = inject('reflashRouter') as Function
const IpoReflash = () => {
    // if(route.options.history.location=="/IPO"||route.options.history.location=="/home"){
    //     reflashRouter()
    // }
    //  reflashRouter()
    //    if(route.options.history.location=="/home"){
    //         reflashRouter()
    //     }
}

const handleLang1 = () => {
    if (proxy.$i18n.locale = 'en') {
        proxy.$i18n.locale = 'en'
    }
    store.setLocale(1)

    IpoReflash()

}

const handleLang2 = () => {
    if (proxy.$i18n.locale = 'zhCt') {
        proxy.$i18n.locale = 'zhCt'
    }
    store.setLocale(2)
    IpoReflash()

}
const handleLang3 = () => {
    if (proxy.$i18n.locale = 'zhCn') {
        proxy.$i18n.locale = 'zhCn'
    }
    store.setLocale(3)
    IpoReflash()

}
defineExpose({
    showLang
})

</script>

<style lang="scss" scoped>
.wrap1 {
    width: 140px;
    // height: 150px;
    background-color: #fff;
    border: 1px solid #A1A1A1;
    border-radius: 8px;
    color: #1C3F56;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    z-index: 99;

    @media screen and (max-width: 768px) {
        display: flex;
        flex-direction: column;
        z-index: 9999;
    }

    li {
        text-align: center;
        line-height: 50px;
    }

    li:hover {
        color: #4ca0fc;
        cursor: pointer;
        background-color: #edf5ff;
    }
}
</style>